import {
    getModelValue,
    renderForm,
    type FormModalDto,
    initModelValue,
    disableModel
} from '@/components/modal/Modal'
import type { FormItemDto } from '../types'
import { Component, Prop, Emit, Watch, Ref } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { FormItemContext } from 'ant-design-vue/es/form/FormItemContext'
import { Radio, RadioGroup } from 'ant-design-vue'

export interface TagDto {
    value: string
    editable: boolean
}

@Component({
    emits: ['click']
})
export class RadioForm extends Render {
    tagList = [] as TagDto[]

    formData = {} as FormModalDto

    @Prop() itemData!: FormItemDto

    @Prop() modelValue?: string

    @Emit('update:modelValue')
    handleEmitData(value: string) {
        return value
    }

    @Emit('click')
    handleClicked() {}

    @Watch('modelValue')
    watchModelValue(newValue: string) {
        // if (newValue) {
        //     const arr = newValue.split(',')
        //     arr.forEach((i) => {
        //         this.tagList.push({
        //             value: i,
        //             editable: false
        //         })
        //     })
        // }
    }

    @Watch('itemData', { immediate: true, deep: true })
    watchItemData(newval: FormModalDto) {
        if (newval?.params?.formConfig) {
            this.formData = newval?.params?.formConfig()
        }
    }

    render() {
        return (
            <div>
                <RadioGroup v-model={this.itemData.value} onChange={(ev) => this.itemData?.callback?.change(ev)}>
                    {this.itemData?.options && this.itemData?.options.map((i) => {
                        return (
                            <Radio value={i.value}>{i.label}</Radio>
                        )
                    })}
                </RadioGroup>
                <div>
                    {
                        this.itemData?.params?.formConfig ? renderForm(this.formData).element() : undefined
                    }
                </div>
            </div>
        )
    }
}

export default toNative<
    {},
    { click: (data: any) => void }>(RadioForm)
